<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="personal_top">
      <router-link tag="p" to="/user" class="iconfont icon-guanbi"></router-link>
      <p>个人资料</p>
      <p @click="save">保存</p>
    </div>

    <!-- 个人信息 -->
    <div class="personal_content">
      <!-- 头像 -->
      <div class="personal_content_head">
        <div class="left">头像</div>
        <div class="right">
          <img
            src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg"
            alt=""
          />
        </div>
      </div>

      <div class="personal_content_item">
        <p>昵称</p>
        <input type="text" v-model="name" />
      </div>

      <div class="personal_content_item">
        <p>ID</p>
        <input type="text" v-model="id" />
      </div>

      <div class="personal_content_item">
        <p>手机号</p>
        <input type="text" v-model="phone" />
      </div>

      <div class="personal_content_item">
        <p>个性签名</p>
        <input type="text" v-model="autograph" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: '中分背带裤',
            id:35882,
            phone:18211370484,
            autograph:"你干嘛？？？"
        };
    },
    methods:{
        //信息保存
        save(){
            window.localStorage.name = this.name;
            window.localStorage.phone = this.phone;
            window.localStorage.autograph = this.autograph;
            this.$toast("保存成功")
        },
    },
    created(){
        if(!window.localStorage.name){
            window.localStorage.setItem('name','中分背带裤');
            window.localStorage.setItem('phone','18211370484');
            window.localStorage.setItem('autograph','你干嘛？？？');
        }
        this.name = window.localStorage.name;
        this.phone = window.localStorage.phone;
        this.autograph = window.localStorage.autograph;
    },
};
</script>

<style lang="scss" scoped>
// 个人信息
.personal_content {
  .personal_content_head {
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    .right {
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .personal_content_item {
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    input {
        border: none;
        text-align: right;
        color: #333;
    }
  }
}

// 头部导航栏
.personal_top {
  padding: 15px;
  display: flex;
  align-items: center;
  p {
    &:nth-child(1) {
      font-weight: 700;
      font-size: 22px;
    }
    &:nth-child(2) {
      flex: 1;
      text-align: center;
      font-weight: 700;
      font-size: 18px;
    }
  }
}
</style>
